<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/api.js"></script>
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/cart.css">
</head>

<body>
    <div id="box">
        <div id="box_header">
            <div class="header_top">
                <div class="header_top_inner">
                    <a href="#">正品保证，免息分期!</a>
                    <ul class="header_top_inner_ri">
                        <li><a href="./login.html">请登录</a></li>
                        <li><a href="./reg.html">注册即送6800元大礼包</a></li>
                        <span>|</span>
                        <li><a href="./cart.html">购物车</a></li>
                        <li>
                            <a href="#">客服服务</a>
                            <div class="dblock">
                                <div>
                                    <ul>
                                        <li><a href="#">客户顾问</a></li>
                                        <li><a href="#">售后维修</a></li>

                                        <li><a href="#">帮助中心</a></li>
                                        <li><a href="#">办理信用卡</a></li>
                                    </ul>
                                </div>
                                <div>
                                    <p>服务专线:400-883-2688</p>
                                    <p>外呼号码:020-83931899</p>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">会员福利</a></li>
                        <span>|</span>
                        <li><a href="https://www.wbiao.cn/gwie/">ENGLISH</a></li>
                    </ul>
                </div>
            </div>
            <div class="header_img">
                <div class="header_img_inner">
                    <a href="./index.html"><img src="../image/logo-icon.png" alt=""></a>
                    <a href="./search.html"><img src="../image/login_2.png" alt=""></a>
                </div>
            </div>
        </div>
        <!-- 


         -->
        <div class="fixed_box">
            <ul>
                <li><span class="iconfont icon-gouwuchekong"></span>
                    <div>购物车</div>
                </li>
                <li><span class="iconfont icon-shoucangaixinxin"></span>
                    <div>我的收藏</div>
                </li>
                <li><span class="iconfont icon-shizhong"></span>
                    <div>浏览足迹</div>
                </li>
                <li><span class="iconfont icon-ico"></span>
                    <div style="height: 220px; width: 220px; top: -132px;left: -220px;">
                        <a href="#">
                            <img src="../image/qrcode_02.png" alt="">
                            <p>下载万表App</p>
                        </a>
                    </div>
                </li>
                <li><span class="iconfont icon-huidaodingbuxianxing"></span>
                    <div>回到顶部</div>
                </li>
            </ul>
        </div>

        <!-- 


          -->

        <div id="box_cart">
            <div class="box_cart_inner">
                <h2>全部商品(<span>0</span>)</h2>
                <div class="box_cart_inner_top">
                    <div>
                        <input type="checkbox" id="ipt" onclick="allFn(this)">
                        <label for="ipt">全选</label>
                        <em>商品信息</em>
                    </div>
                    <ul>
                        <li>单价</li>
                        <li>数量</li>
                        <li>小计</li>
                        <li>操作</li>
                    </ul>
                </div>
                <div class="box_cart_inner_bottom">

                </div>
                <div class="box_cart_inner_foot">
                    <ul>
                        <li><input type="checkbox" id="ipt_1" onclick="allFn(this)"></li>
                        <li><label for="ipt_1">全选</label></li>
                        <li><button onclick="delBtnFn()">删除</button></li>
                        <li>
                            <p>已选商品<span>0</span>件</p>
                        </li>
                        <li>
                            <p>合计:<i>￥0</i></p>
                        </li>
                    </ul>
                    <div>
                        结算
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script>
    $('.fixed_box>ul>li:eq(0)').css("position", "relative");
    $('.fixed_box>ul>li:eq(0)').append("<em></em>")

    let id = localStorage.getItem("wb-uid");
    let islogin = localStorage.getItem("wb-name");
    if (islogin) {
        $(".header_top_inner_ri>li:eq(0)>a").html(islogin);
        updataListFn();
    } else {
        $(".box_cart_inner").html(`
        <div style="width:300px; text-align:center; margin:0 auto; ">
        <a style="font-size:16px;color:red;" href="./login.html">
            您还没有登录，请登录
            </a><div>`);
    }

    function updataListFn() {
        $.get(cartList, { id }, function (res) {
            // console.log(res);
            let arr = res.data;
            // console.log(arr);
            if (arr.length <= 0) {
                $(".box_cart_inner_bottom").html(`
                <div style="width:350px;height:200px; text-align:center; margin:0 auto; ">
                <a style="font-size:24px;color:red;" href="./search.html">
                您的购物车空空如也，快去选取心仪的商品吧
                </a><div>`);
            } else {
                let resArr = arr.map(e => `
            <div class="boxCarInBo_box">
                <div class="boxCarInBo_box_lt">
                    <input iptpid="${e.pid}" type="checkbox" onclick="singleFn(this)">
                    <div>
                        <img src="${e.pimg}" alt="">
                        <div>
                            <p>${e.pdesc}</p>
                            <p>${e.pname}</p>
                        </div>
                    </div>
                </div>
                <ul class="boxCarInBo_box_rt">
                    <li>￥<span>${parseInt(e.pprice)}</span></li>
                    <li>
                        <button onclick="subNumFn(${e.pid},this)">-</button>
                        <input readonly="readonly" type="text" value="${e.pnum}">
                        <button onclick="addNumFn(${e.pid},this)">+</button>
                    </li>
                    <li>￥<span>${parseInt(e.pprice) * parseInt(e.pnum)}</span></li>     
                    <li><button onclick="delFn(${e.pid})">删除</button></li>
                </ul>
            </div>`
                );
                $(".box_cart_inner_bottom").html(resArr.join(""));
                $(".box_cart_inner>h2>span").html(resArr.length);
                singleFn();
                $.get(cartList, { id }, function (res) {
                    // console.log(res.data);
                    if (res.data.length == 0) {
                        // console.log("996");
                    } else {
                        let num = 0;
                        res.data.forEach(e => {
                            num += parseInt(e.pnum);
                        });
                        $('.header_top_inner_ri>li:eq(2)').html("购物车(" + num + ")");
                        $('.header_top_inner_ri>li:eq(2)').css("color", "red");
                        fixedCartFn();
                    }
                })
            }

        })
    }
    /* 加按钮 */
    function addNumFn(pid, btn) {
        console.log(btn);
        let num = $(btn).prev().val();

        $(btn).prev().val(parseInt(num) + 1);
        // console.log(num);
        let pnum = $(btn).prev().val();
        console.log(pnum);
        // console.log($(btn).parent().prev().children().html());
        let pprice = $(btn).parent().prev().children().html();
        $(btn).parent().next().children().html(pnum * pprice);
        // updataListFn();
        singleFn();
        fixedCartFn();
        $.get(CartUpdateAPI, { uid: id, pid, pnum }, function (res) {
            $.get(cartList, { id }, function (res) {
                console.log(res.data);
                if (res.data.length == 0) {
                    console.log("996");
                } else {
                    let num = 0;
                    res.data.forEach(e => {
                        num += parseInt(e.pnum);
                    });
                    $('.header_top_inner_ri>li:eq(2)').html("购物车(" + num + ")");
                    $('.header_top_inner_ri>li:eq(2)').css("color", "red");
                }
            })
        })
    }
    /* 减按钮 */
    function subNumFn(pid, btn) {
        // console.log(btn);
        let num = $(btn).next().val();
        if (num != 1) {
            $(btn).next().val(parseInt(num) - 1);
            // console.log($(btn).next().val());
            let pnum = $(btn).next().val();
            let pprice = $(btn).parent().prev().children().html();
            $(btn).parent().next().children().html(pnum * pprice);
            singleFn();
            fixedCartFn();
            // console.log(pnum);
            //  uid  用户id
            //  pid  商品id
            //  pnum  要添加的商品数量
            $.get(CartUpdateAPI, { uid: id, pid, pnum }, function (res) {
                $.get(cartList, { id }, function (res) {
                    console.log(res.data);
                    if (res.data.length == 0) {
                        // console.log("996");
                    } else {
                        let num = 0;
                        res.data.forEach(e => {
                            num += parseInt(e.pnum);
                        });
                        $('.header_top_inner_ri>li:eq(2)').html("购物车(" + num + ")");
                        $('.header_top_inner_ri>li:eq(2)').css("color", "red");

                    }
                })
            })
        }
    }
    /* 删除按钮 */
    function delFn(pid) {


        // $(btn).parent().parent().parent().remove();
        // console.log(pid);
        //     uid  用户id
        //     pid  商品id
        $.get(CartDeleteAPI, { uid: id, pid }, function (res) {
            // console.log(res);
            updataListFn();
        })
    }
    /* bottom 删除按钮 */
    function delBtnFn() {
        let arr = $(".boxCarInBo_box_lt input");
        let resArr = Array.from(arr).filter((e) => {
            // console.log(e);
            return e.checked == true;
        });
        // console.log(resArr);
        resArr.forEach((e) => {
            // console.log(e, e.iptpid, e.getAttribute("iptpid"));
            delFn(e.getAttribute("iptpid"));
            singleFn();
            sumFn();
        })

    }
    /* 全选按钮 */
    function allFn(btn) {
        let arr = $(".boxCarInBo_box_lt input");
        // console.log(btn.checked);
        Array.from(arr).forEach((e) => {
            // console.log(e);
            e.checked = btn.checked;
        });
        $(".box_cart_inner_top>div>input")[0].checked = btn.checked;
        $('.box_cart_inner_foot>ul>li>input')[0].checked = btn.checked;
        productNumFn();
        sumFn();
    }

    /* 单选按钮 */
    function singleFn() {
        let arrs = $(".boxCarInBo_box_lt input");
        let str = null;
        if (Array.from(arrs).length == 0) {
            str = false;
        } else {
            str = Array.from(arrs).every((e) => {
                console.log(e, e.checked);
                return e.checked == true;
            });
            console.log(str);
        }
        $(".box_cart_inner_top>div>input")[0].checked = str;
        $('.box_cart_inner_foot>ul>li>input')[0].checked = str;
        productNumFn();
        sumFn();
    }
    /* 价格 */
    function sumFn() {
        let arr = $(".boxCarInBo_box_lt input");
        let resArr = Array.from(arr).filter((e) => {

            return e.checked == true;
        });

        let sum = 0;
        resArr.forEach(e => {

            let number = $(e).parent().next().children().eq(2).children().html();
            sum += parseInt(number);
        })

        $(".box_cart_inner_foot>ul>li:last>p>i").html("￥" + sum);
    }
    /* 商品数量 */
    function productNumFn() {

        let arr = $(".boxCarInBo_box_lt input");
        // console.log(arr);
        let resArr = Array.from(arr).filter((e) => {
            return e.checked == true;
        });
        let num = 0;
        resArr.forEach(e => {
            e.getAttribute("iptpid");
            let s = $(e).parent().next().children().eq(1).children().eq(1).val();

            num += parseInt(s);
        });
        // console.log(num)
        $('.box_cart_inner_foot>ul>li:eq(3)>p>span').html(num);
        $('.box_cart_inner_foot>ul>li:eq(3)>p>span').css("color", "red");
    }
    /* fixed 购物车数量 */

    function fixedCartFn() {
        let arr = $(".boxCarInBo_box_lt input");
        // console.log(arr);
        /* let resArr = Array.from(arr).filter((e) => {
            return e.checked == true;
        }); */
        let num = 0;
        Array.from(arr).forEach(e => {
            let s = $(e).parent().next().children().eq(1).children().eq(1).val();
            num += parseInt(s);
        });
        // console.log(num);
        $('.fixed_box>ul>li:eq(0)>em').css({ display: "inline-block", color: "white", background: "red", fontSize: "12px", width: "18px", height: "18px", borderRadius: "18px", textAlign: "center", position: "absolute", top: "5px", left: "24px" })
        $('.fixed_box>ul>li:eq(0)>em').html(num);
    }


</script>

</html>